<template>
  <div>
    <Header>
      <template v-slot:login-back>
        <div @click="goBack" class="home-header">
          <van-icon name="arrow-left" color="#fff" />
        </div>
      </template>
      <template v-slot:go-home>
        <div @click="goHome" class="home-header">
          <van-icon name="wap-home" color="#fff" />
        </div>
      </template>
    </Header>
    <div class="comment-detail" v-for="item in commendList" :key="item.docid">
      <h3 class="title">{{item.title}}</h3>
      <div class="content">
        <div class="content-top">
          <span>{{item.source}}</span>
          <span>{{item.ptime}}</span>
          <span>{{item._origin}}</span>
        </div>
        <div class="content-info">
          <div class="info-txt">
            <p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
          </div>
          <van-image
            width="300"
            height="200"
            style="margin: 20px 40px"
            src="https://img01.yzcdn.cn/vant/cat.jpeg"
          />
        </div>
        <div class="gentie">
          <span>热门跟帖</span>
        </div>
        <div class="comment">
          <div class="comment-title">
            <span class="auth">火星网友</span>
            <div class="title-right">
              <van-icon name="good-job-o" size="17" />
              <span>190</span>
            </div>
          </div>
          <div class="comment-title">
            <span>哈哈哈哈</span>
            <div class="title-right">
              <van-icon name="chat-o" size="17" />
              <span>回复</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    
  </div>
</template>
<script>
import Header from "@/components/home/Header.vue";
import { getHotList } from "@/api/list.js";
export default {
  name: "Commend-detail",
  components: { Header },
  created() {
    this.getData();
  },
  data() {
    return {
      commendList: [],
    };
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    goHome() {
      this.$router.push({ path: "/home" });
    },
    async getData() {
      let res = await getHotList();
      this.commendList = res.data.hot;
    },
  },
};
</script>
<style scoped lang="less">
.title {
  margin: 20px auto;
  font-size: 20px;
  text-align: center;
}
.content-top {
  font-size: 12px;
  color: #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
  span {
    margin: 0 10px;
  }
}
.content-info {
  .info-txt {
    font-size: 15px;
    margin: 0 70px 20px 70px;
    line-height: 20px;
    text-indent: 2;
  }
}
.gentie {
  span {
    background: #df3031;
    padding: 5px;
    font-size: 12px;
    color: #fff;
  }
}
.comment {
  position: relative;
  margin: 10px 10px;
  .comment-title {
    display: flex;
    line-height: 22px;
    margin: 10px 0;
    .auth {
      color: #5191d2;
      font-size: 12px;
    }
    .title-right {
      margin-right: 20px;
    }
    span {
      font-size: 16px;
      flex: 1;
    }
  }
}
</style>
